<template>
	 
	   <el-col  :span="24">
		   <div class="flex-center">
		<span class=" radiohead">店铺</span> 
	   <RadioButton ref="groupRadioRef" :list="groupList"    @change="groupChange"></RadioButton>
	   </div>
	   </el-col>
	 
	   <el-col :span="24">
		   <div class="flex-center">
		   <span class=" radiohead">站点</span> 
	       <RadioButton ref="marketRadioRef"  :list="marketList"   @change="marketChange"  keyName="marketplaceid" ></RadioButton>
		   </div>
	   	</el-col>
</template>

<script >
	import {Search,ArrowDown,} from '@element-plus/icons-vue'
	import {MenuUnfold,SettingTwo,Help,Copy,MoreOne} from '@icon-park/vue-next';
	import groupApi from '@/api/amazon/group/groupApi';
	import marketApi from '@/api/amazon/market/marketApi'
	import { ref,reactive,onMounted,watch } from 'vue'
    import RadioButton from '@/components/RadioButton/index.vue';
	export default{
		name:"group",
		components:{MenuUnfold,Search,ArrowDown,SettingTwo,Help,Copy,MoreOne,RadioButton},
		emits:["change"],
		props:["defaultValue","isproduct"],
		setup(props,context){
			let groupList =ref([])
			let marketList =ref([])
			let groupRadioRef=ref(RadioButton);
			let marketRadioRef=ref(RadioButton);
			let groupid=ref("")
			let marketplaceid = ref("")
			onMounted(()=>{
				getGroupData()
			})
		 
			//获取店铺列表
			function getGroupData(){
				groupApi.getAmazonGroup().then((res)=>{
					 if(props.defaultValue!="only"){
						 res.data.unshift({"id":"","name":"不限"})
					 }
					if(res.data&&res.data.length>1){
						    groupid.value = res.data[1].id;
							res.data[1].isActive=true;
						    getMarketData(groupid.value);
					}
				    groupList.value=res.data;
				
				})
			}
			//获取国家列表
			function getMarketData(id){
				marketApi.getMarketByGroup({'groupid':id}).then((res)=>{
					if(props.isproduct=='ok'){
						res.data.push({"id":"IEU","name":"欧洲(不含UK)","marketplaceid":"IEU"})
					}
					if(props.defaultValue!="only"){
						res.data.unshift({"id":"","name":"不限","marketplaceid":""})
					}
					if(res.data&&res.data.length>1){
	        			marketplaceid.value = res.data[1].marketplaceid;
						res.data[1].isActive=true;
					}
					marketList.value=res.data;
					context.emit("change",getData());
				})
			}
			function groupChange(val){
				groupid.value=val;
				getMarketData(val);
			}
			
			function marketChange(val){
				marketplaceid.value=val;
				context.emit("change",getData())
			}
		    function getData(){
				return {'groupid':groupid.value,"marketplaceid":marketplaceid.value};
			}
			return{
				 groupList,marketList,groupChange,marketChange,groupid,marketplaceid,
				 getData,groupRadioRef,marketRadioRef,
			}
		}
	}
</script>

<style>
	.radiohead{
		padding-bottom: 16px;
		font-size:12px;
		padding-right: 16px;
		color: #999999;
	}
</style>
